<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="bootstrap/assets/ico/favicon.png">

    <title>Create a New Story</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/createstory.css" rel="stylesheet">

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    var myLatLng;
    var marker;
    var map;
      function initialize() {
        var mapOptions = {
          zoom: 10,
          center: new google.maps.LatLng(41.100, 28.944),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        google.maps.event.addListener(map, 'click', function(event) {
          addMarker(event.latLng);
        });

        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            myLatLng = pos;
            map.setCenter(pos);
          }, function(error) {});
        }
      }

      google.maps.event.addDomListener(window, 'load', initialize);

      function addMarker(location) {
        if(marker)
          marker.setMap(null);
        marker = new google.maps.Marker({
          position: location,
          map: map
        });
        myLatLng = location;
      }
    </script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body background="img/back_nologo.png">
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <img src="img/logo_writing.png" id="top_logo">
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#home">Home Page</a></li>
            <li><a href="#recommendation">Recommendations</a></li>
            <li><a href="#search">Search Stories</a></li>
            <li><a href="#following">Following</a></li>
          </ul>
          <ul class="nav navbar-nav" id="profile_buttons">
            <li><a href="#profile">My Profile</a></li>
            <li><a href="#following">Logout</a></li>
          </ul>
        </div><!-- /.nav-collapse -->

      </div><!-- /.container -->
    </div><!-- /.navbar -->

    <div class="container">
      <div class="jumbotron">
        <center><h1>Create a New Story</h1></center>
        <div class="row">
        <div class="col-lg-6">
          <label for="titleInput">Title:</label>
          <input type="text" class="form-control" id="titleInput" placeholder="Write a title...">
          <label for="storyInput">Story:</label>
          <textarea class="form-control" id="storyInput" rows="15" placeholder="Write the story..."></textarea>

          <p style="float:right"><a><img alt="" src="holder.js/300x200/text: " /></a><input type="file" id='media' title="Search for a file to add"></p>

          <p style="float:right"><a class="btn btn-success" onClick='create()'>Create</a> <a class="btn btn-danger" onClick="discard()">Discard</a></p>
          <div class="alert alert-info" id="alert_template" style="display: none;">
            <button type="button" class="close">×</button>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="form-inline">
            <label class="radio-inline" style="font-size:12pt">
              <input type="radio" name="locationOption" id="useCurrent" value="useCurrent" checked>Use my current location
            </label>
            <label class="radio-inline" style="font-size:12pt">
              <input type="radio" name="locationOption" id="selectFromMap" value="selectFromMap">Select from map
            </label>
          </div>
          <div id="map-canvas"></div>

          <div class="form-inline">
            <label class="radio-inline" style="font-size:12pt">
              <input type="radio" name="linkingOption" id="private" value="private" checked>
              Private Linking
            </label>
            <label class="radio-inline" style="font-size:12pt">
              <input type="radio" name="linkingOption" id="public" value="public">
              Public Linking
            </label>
          </div>

          <div class="well sidebar-nav" id="main-page-list-container">
            <ul class="nav" id="main-page-list">
              <li id="mainpagelistheader">Owners</li>
                <input type="text" class="form-control" id="owner" placeholder="Add owners separating by comma...">
              </li>
            </ul>
          </div><!--/.well -->

          <div class="well sidebar-nav" id="main-page-list-container">
            <ul class="nav" id="main-page-list">
              <li id="mainpagelistheader">Tags</li>
                <input type="text" class="form-control" id="tag" placeholder="Add tags separating by comma...">
              </li>
            </ul>
          </div><!--/.well -->

        </div>
      </div>
      </div>
    </div><!--/.container-->



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="bootstrap/assets/js/jquery.js"></script>
    <script src="bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="js/holder.js"></script>
    <script src="js/bootstrap.file-input.js"></script>
    <script src="js/createstory.js"></script>
    <script>$(document).ready(function(){$('input[type=file]').bootstrapFileInput();});</script>
  </body>
</html>
